
import { useMount, useReactive } from 'ahooks';
import { OlapData01 } from '../Data'
import { useState } from 'react';

import { Button, Radio, Switch } from 'antd'

import { saveFile } from '@grapecity/wijmo';

import { CellRange } from '@grapecity/wijmo.grid';

import { PivotEngine, ShowTotals } from '@grapecity/wijmo.olap';

import { PivotPanel, PivotGrid } from '@grapecity/wijmo.react.olap';

// import * as gridXlsx from '@grapecity/wijmo.grid.xlsx';


const WijmoAA02 = () => {
    const InitData = useReactive({
        init: null,
        data: new PivotEngine({
            autoGenerateFields: false,
            itemsSource: OlapData01(10000),
            showRowTotals: 'Subtotals',
            fields: [
                { binding: 'date', header: '季度', format: 'yyyy \"Q\"q' },
                { binding: 'date', header: '月份', format: 'MMMM' },
                { binding: 'agent', header: 'Agent' },
                { binding: 'region', header: 'Region' },
                { binding: 'platform', header: 'Platform' },
                { binding: 'product', header: 'Product' },
                { binding: 'sales', header: 'Sales', format: 'c2' },
                { binding: 'downloads', header: 'Downloads', format: 'n0' },
                { binding: 'revenue', header: 'Revenue', format: 'c2' },
            ],
            rowFields: ['季度'],
            columnFields: ['Platform'],
            valueFields: ['Sales', 'Downloads', 'Revenue'],
            showRowTotals: 'Subtotals',
            showColumnTotals: 'Subtotals'
        }),
        showRowTotals: ShowTotals.Subtotals,
        showColumnTotals: ShowTotals.Subtotals
    })

    const onChange = (e) => {
        const data = InitData.data
        switch (e.target.value) {
            case 'a':
                data.rowFields.clear();
                data.columnFields.clear();
                data.valueFields.clear();
                data.rowFields.push('季度');
                data.columnFields.push('Platform');
                data.valueFields.push('Sales', 'Downloads', 'Revenue')
                break;
            case 'b':
                data.rowFields.clear();
                data.columnFields.clear();
                data.valueFields.clear();
                data.rowFields.push('季度', 'Region');
                data.valueFields.push('Sales', 'Downloads', 'Revenue')
                break;
            case 'c':
                data.rowFields.clear();
                data.columnFields.clear();
                data.valueFields.clear();
                data.rowFields.push('季度', 'Agent');
                data.columnFields.push('Platform', 'Product');
                data.valueFields.push('Sales', 'Downloads', 'Revenue')
                break;
            case 'd':
                data.rowFields.clear();
                data.columnFields.clear();
                data.valueFields.clear();
                data.rowFields.push('季度', '月份');
                data.valueFields.push('Sales', 'Downloads', 'Revenue')
                break;
            default:
                break;
        }

    }


    const onSave = () => {
        localStorage.viewDefinition = InitData.data.viewDefinition
    }
    const onLoad = () => {
        if (localStorage.viewDefinition) {
            InitData.data.viewDefinition = localStorage.viewDefinition
        }
    }

    useMount(() => {
        InitData.data.fields.getField('Sales').format = 'n0';
    })


    const init = (init) => {
        InitData.init = init
    }

    const RowChange = (e) => {
        InitData.init.engine.showRowTotals = e ? ShowTotals.Subtotals : ShowTotals.None
        InitData.showRowTotals = InitData.init.engine.showRowTotals
    }
    const ColumnChange = (e) => {
        InitData.init.engine.showColumnTotals = e ? ShowTotals.Subtotals : ShowTotals.None
        InitData.showColumnTotals = InitData.init.engine.showColumnTotals
    }


    const onSaveData = (type) => {
        const init = InitData.init
        // if (type === 'csv') {
        //     const rng = new CellRange(0, 0, init.rows.length - 1, init.columns.length - 1)
        //     const csv = init.getClipString(rng, true, true, true)
        //     saveFile(csv, 'PivotGrid.csv')
        // }
        // else if (type === 'xlsx') {
        //     const book = FlexGridXlsxConverter.saveAsync(init, { includeColumnHeaders: true, includeRowHeaders: true })
        //     book.sheets[0].name = 'PivotGrid'
        //     book.saveAsync('PivotGrid.xlsx')
        // }
    }


    return (
        <div className="Page">
            <div className='olap'>
                <div>
                    <PivotPanel id="sample-panel" itemsSource={InitData.data} />
                </div>
                <div>
                    <PivotGrid itemsSource={InitData.data} initialized={init} />
                </div>
            </div>
            <div className='center'>
                <Radio.Group onChange={onChange} defaultValue="a">
                    <Radio.Button value="a">A01</Radio.Button>
                    <Radio.Button value="b">A02</Radio.Button>
                    <Radio.Button value="c">A03</Radio.Button>
                    <Radio.Button value="d">A04</Radio.Button>
                </Radio.Group>
            </div>
            <div className='center'>
                <Button type='primary' onClick={onSave}>保存配置</Button>
                <Button type='primary' onClick={onLoad}>加载配置</Button>
            </div>
            <div className='center'>修改配置列 , 修改data中的配置信息</div>
            <div className='center'>InitData.data.fields.getField('Sales').format = 'n0' 字段额外设置</div>
            <div className='center'>#sample-panel [wj-part=xxxx] table 区域颜色设置  d-filters d-cols d-rows d-vals</div>

            <div className="Label">
                <label htmlFor=""> 行统计 </label>
                <Switch defaultChecked={!!InitData.showRowTotals} onChange={RowChange} />
            </div>
            <div className="Label">
                <label htmlFor=""> 列统计 </label>
                <Switch defaultChecked={!!InitData.showColumnTotals} onChange={ColumnChange} />
            </div>


            <div className='center'>
                <Button type='primary' onClick={() => onSaveData('csv')}>保存数据(csv)</Button>
                <Button type='primary' onClick={() => onSaveData('xlsx')}>保存数据(xlsx)</Button>
            </div>

        </div>

    );
};

export default WijmoAA02